<template>
	<div class="lock_body">
		<div class="lock_form animated bounceInDown">
			<h3 class="text-white">admin</h3>
	        <el-input placeholder="请输入登录密码"
	                  type="password"
	                  class="input-with-select animated"
	                  v-model="password"
	                  @keyup.enter.native="handleLogin">
	          <el-button slot="append"
	                     icon="el-icon-test iconfont"
	                     @click="handleLogin"></el-button>
	          <el-button slot="append"
	                     icon="el-tuichu1 iconfont"
	                     @click="handleLogout"></el-button>
	        </el-input>
		</div>
	</div>
</template>
<script>
	export default {
		name:'lock',
		components:{
			
		},
		data(){
			return {
				password:''
			}
		},
		methods:{
			handleLogin(){

			},
			handleLogout(){
				this.$confirm('确定要退出系统吗？', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {

		        	this.$store.dispatch("LogOut").then(() => {
			          this.$router.push({ path: "/login" });
			        });
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消退出'
		          });          
		        });
			}
		}
	}
</script>
<style scoped>

	.lock_body{
		height:100%;
		background: url('/static/img/login_bg1.jpg') no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.text-white{
		color:#fff;
		font-weight:400;
	}
</style>